<template>
  <el-dialog title="添加数据表映射"
             :visible.sync="visible"
             width="600px"
             @before-close="closeDialog"

             append-to-body>
    <avue-form ref="avueForm" v-if="mappingOption" :option="mappingOption" v-model="mappingModel"
               @submit="submit"></avue-form>
  </el-dialog>
</template>

<script>
import startEditMappingTableOption from "./startEditMappingTableOption";
import {deepClone} from "utils/util";


export default {
  name: "startEditMappingTable",

  data() {
    return {
      visible: false,
      mappingModel: {},
      mappingOption: null,
      cloudFormColumn: [],
    }
  },
  methods: {
    edit(cloudFormColumn, row) {
      let data = deepClone(row)
      this.mappingModel = data || {}
      this.cloudFormColumn = cloudFormColumn
      this.mappingOption = startEditMappingTableOption(cloudFormColumn);
      this.visible = true;
      this.$nextTick(() => {
        this.$refs.avueForm.updateDic('dataSourceKey');
        this.$refs.avueForm.updateDic('startMappingMode');
      })

    },
    submit(val, done) {
      done();
      val.title = this.mappingModel.$dataSourceKey + "-" + this.mappingModel.$targetTableName
      this.$emit("submit", val, this.closeDialog)
    },
    closeDialog() {
      this.visible = false;
      this.mappingModel = {};
      this.mappingOption = null;
      this.cloudFormColumn = [];
    }
  }
}
</script>

<style scoped>

</style>
